<template>
  <div class="topbar">
    <div class="wrap topbarwrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <ul class="r">
        <li>
          <img class="avator" :src="userInfo.headImg" alt="" />
          用户名：{{ userInfo.nickName }}
        </li>
        <li>我的积分：{{ userInfo.coin }}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="cart-btn" v-if="LoginStatus">
          <img src="../assets/img/cart.png" alt="" />
          <span>购物车</span>
          <strong>{{ cartTotal }}</strong>
        </li>
        <li class="loginbtn" @click="changeIsShowLogin(true)" v-else>登录</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import { WeChatLoginAPI } from "../request/api";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      LoginStatus: (state) => state.loginStatus.LoginStatus,
      isShowLogin: (state) => state.isShowLogin.isShowLogin,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  methods: {
    ...mapMutations({
      changeIsShowLogin: "isShowLogin/changeIsShowLogin",
      changeLoginStatus: "loginStatus/changeLoginStatus",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
      asyncChangeToastShow: "toastShow/asyncChangeToastShow",
    }),
  },
  created() {
 

    //扫码后后端会给跳转地址，会刷新页面，在页面创建的时候发送一个请求
    //有可能会获取不到code 使用$nextTick()!!!
    this.$nextTick(async () => {
      //路由发生跳转，更新一下用户信息
      // 路由地址变化后，判断当前用户token是否还存在
      // 如果存在，为登录状态
      // 否则为未登录
      let myToken = localStorage.getItem("x-auth-token");
      this.changeLoginStatus(Boolean(myToken));
      //先判断用户有没有登录

      if (myToken) {
    
        // 已经登录
        this.asyncChangeUserInfo(); //更新用户信息
      } else {
        //没登录
      

        this.initUserInfo(); //用户信息初始化
      }

      //只要用户扫码了 页面就会重新刷新 此时可以获取一下code 的值
      if (!this.$route.query.code) return;

      //调用微信登录接口 传入asscess参数
      let res = await WeChatLoginAPI({ code: this.$route.query.code });

      if (res.code == 0) {
        //正常登录成功状态
        //调用自定义弹窗
        this.asyncChangeToastShow({
          toastType: "success",
          toastMsg: "登陆成功 ",
        });

        //  存token
        localStorage.setItem("x-auth-token", res["x-auth-token"]);
        // 更新登录状态(换成购物车图标)
        this.changeLoginStatus(true);
        // 4.清除地址栏中的code
        this.$router.push(this.$route.path);
        // 获取用户信息
        this.asyncChangeUserInfo();
      } else if (res.code == 407) {
        //第一次微信扫码登录，需要进行一次手机验证码登录绑定手机号号码
      
           //调用自定义弹窗
        this.asyncChangeToastShow({
          toastType: "warning",
          toastMsg: "需要进行一次手机号登录",
        });
        //打开登录窗口进行手机号绑定
        this.changeIsShowLogin(true);
        //3.存储uuid(登录时取出来)
        localStorage.setItem("uuid", res.uuid);
      } else {
        // 验证码超时，需要重新扫码
        //提示用户重新扫码
        //1提示二维码失效
       
           //调用自定义弹窗
        this.asyncChangeToastShow({
          toastType: "danger",
          toastMsg: "二维码失效",
        });
        //2 .打开模态窗 让用户重新扫码
        this.changeIsShowLogin(true);
      }
    });
  },
};
</script>

<style lang="less" scoped>
.topbar {
  height: 40px;
  background: #242b39;
  .topbarwrap {
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    line-height: 23px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    text-align: center;
    .r {
      display: flex;
      li {
        cursor: pointer;
        margin-left: 20px;
      }
      .loginbtn {
        width: 124px;
        height: 40px;
        background: #0a328e;
      }
      .cart-btn {
        width: 124px;
        height: 40px;
        background: #0a328e;
        text-align: center;
        img {
          width: 20px;
          height: 19px;
          vertical-align: middle;
        }
        span {
          margin: 0 8px;
        }
        strong {
          width: 22px;
          height: 22px;
          line-height: 22px;
          display: inline-block;
          border-radius: 50%;
          background-color: #fd604d;
        }
      }
      .avator {
        vertical-align: middle;
        width: 23px;
        border-radius: 50%;
      }
    }
  }
}
</style>
